<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script src="../bower_components/babel/browser.js"></script>
    <script src="../bower_components/jquery/dist/jquery.js"></script>
    <script src="../bower_components/react/react.development.js"></script>
    <script src="../bower_components/react/react-dom.development.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        class Fooler extends React.Component {
            render() {
                return (
                    <div>
                        <button onClick={this._handleClick}>Fooler</button>
                    </div>
                )
            }
            // constructor(props) {
            //     super(props);
            //     this._handleClick = this._handleClick.bind(this)
            // }
            _handleClick(e) {
                alert("这个结尾");
            }
        }
        class ExampleDom extends React.Component {
            render() {
                var FoolerList = [];
                for (var i=0;i<10;i++) {
                    FoolerList.push(<Fooler key={'fooler'+i}/>);
                }
                return (
                    <div>
                        <button onClick={this._handleClick}>ExampleDom</button>
                        <br/>
                        <span>引用</span>
                        <Fooler/>
                        <span>列表引用</span>
                        {FoolerList}
                    </div>
                )
            }
            // constructor(props) {
            //     super(props);
            //     this._handleClick = this._handleClick.bind(this)
            // }
            _handleClick(e) {
                alert("ExampleDom");
            }
        }
        // const exampleDom = React.createElement(ExampleDom, null, null)
        ReactDOM.render(
            <ExampleDom/>,
            // exampleDom,
            document.getElementById('app')
        )
    </script>
</body>
</html>